<template>
  <div class="wrapper" id="login">
    <div style="background-color: #fff;width: 350px;padding: 20px;
        border-radius: 10px; margin: 150px auto; z-index: 999;      ">
      <div style="margin: 20px 0; text-align: center; font-size: 24px">
        <b>高校资产管理系统</b>
      </div>
      <el-form :model="user" :rules="rules" ref="userForm" @keydown.enter.native="login">
        <el-form-item prop="loginName">
          <el-input
              size="medium"
              style="margin: 10px 0"
              prefix-icon="el-icon-user"
              v-model="user.loginName"
          ></el-input>
        </el-form-item>
        <el-form-item prop="password">
          <el-input
              size="medium"
              style="margin: 10px 0"
              prefix-icon="el-icon-lock"
              show-password
              v-model="user.password"
          ></el-input>
        </el-form-item>
        <el-form-item style="margin: 10px 0; text-align: right">
          <el-button
              type="primary"
              size="small"
              autocomplete="off"
              @click="login">登录
          </el-button>
          <el-button
              type="warning"
              size="small"
              autocomplete="off"
              @click="reset"
          >重置
          </el-button
          >
        </el-form-item>
      </el-form>
    </div>
  </div>
</template>

<script>
export default {
  name: "Login",
  data() {
    return {
      user: {},
      rules: {
        loginName: [
          {required: true, message: "请输入用户名", trigger: "blur"},
          {min: 3, max: 10, message: "长度在 3 到 5 个字符", trigger: "blur"},
        ],
        password: [
          {required: true, message: "请输入密码", trigger: "blur"},
          {
            min: 1,
            max: 50,
            message: "长度在 1 到 20 个字符",
            trigger: "blur",
          },
        ],
      },
    };
  },
  methods: {
    login() {
      this.$refs["userForm"].validate((valid) => {
        if (valid) {
          // 表单校验合法
          this.request.post("/sysuser/login", this.user).then((res) => {
            if (res.success) {
              localStorage.clear();
              localStorage.setItem("user", JSON.stringify(res.data)); //存储用户信息到浏览器
              this.$router.push("/");
              this.$message.success("登录成功");
            } else {
              this.$message.error(res.msg);
            }
          });
        }
      });
    },
    reset() {
      this.user.loginName = null;
      this.user.password = null;
    },
  },
};

function createMeteor() {
  const starfield = document.getElementById('login');
  if (!starfield) return;
  const meteor = document.createElement('div');
  // meteor.className = 'meteor';
  meteor.className = 'shooting_star';
  // 随机位置
  const x = Math.random() * window.innerWidth;
  const y = Math.random() * window.innerHeight;

  // 设置初始位置
  meteor.style.left = `${x}px`;
  meteor.style.top = `${y}px`;

  // 随机动画延迟和持续时间
  const delay = Math.random() * 2; // 最多延迟2秒
  const duration = 1 + Math.random() * 5; // 持续时间为1到5秒之间

  meteor.style.animationDelay = `${delay}s`;
  meteor.style.animationDuration = `${duration}s`;

  // 添加流星到星域中
  starfield.appendChild(meteor);

  // 移除流星元素
  setTimeout(() => {
    meteor.remove();
  }, (delay + duration) * 1000);
}

// 定期创建流星
setInterval(createMeteor, 1500); // 每隔500毫秒创建一个新的流星
</script>

<style>
/* 动态渐变背景 */
@keyframes gradient {
  0% {
    background-position: 0% 100%;
  }
  100% {
    background-position: 0% 0%;
  }
}

.wrapper0 {
  height: 100vh;
  //background-image: linear-gradient(to bottom right, #fc4646, #3f7efb);
  overflow: hidden;
  background-image: linear-gradient(to bottom, #dc5959, #d97f41, #a9c759, #85bb31,
  #3fe19d, #64b3d9, #43bfd7, #4085e0,
  #475dc4, #8d80e1, #dc5959, #d97f41);
  background-size: 200% 1100%;
  animation: gradient 15s ease infinite;
}

/**流星*/
.wrapper {
  position: relative;
  width: 100vw;
  height: 100vh;
  overflow: hidden;
  animation: backgroundChange 10s infinite alternate ease-in-out;
}

@keyframes backgroundChange {
  0% {
    background-color: #314559; /* 最亮的颜色 */
  }
  50% {
    background-color: #1d202f; /* 中间色调 */
  }
  100% {
    background-color: #0e1118; /* 最暗的颜色 */
  }
}

.shooting_star {
  position: absolute;
  left: 100%;
  top: 100%;
  height: 2px;
  background: linear-gradient(-45deg, #a7d5f1, rgba(0, 0, 255, 0));
  border-radius: 999px;
  filter: drop-shadow(0 0 6px #699bff);
  -webkit-animation: tail 5000ms ease-in-out infinite, shooting 5000ms ease-in-out infinite;
  animation: tail 5000ms ease-in-out infinite, shooting 5000ms ease-in-out infinite;
}

.shooting_star::before {
  content: "";
  position: absolute;
  /*top: calc(20% - 1px);*/
  right: 0;
  height: 2px;
  background: linear-gradient(-45deg, rgba(0, 0, 255, 0), #5183f1, rgba(0, 0, 255, 0));
  transform: translateX(50%) rotateZ(45deg);
  border-radius: 100%;
  -webkit-animation: shining 3000ms ease-in-out infinite;
  animation: shining 3000ms ease-in-out infinite;
}

.shooting_star::after {
  content: "";
  position: absolute;
  top: calc(50% - 1px);
  right: 0;
  height: 2px;
  background: linear-gradient(-45deg, rgba(0, 0, 255, 0), #5f91ff, rgba(0, 0, 255, 0));
  border-radius: 100%;
  -webkit-animation: shining 3000ms ease-in-out infinite;
  animation: shining 3000ms ease-in-out infinite;
  transform: translateX(50%) rotateZ(135deg);
}

@keyframes tail {
  0% {
    width: 0;
  }
  30% {
    width: 100px;
  }
  100% {
    width: 0;
  }
}

@keyframes shining {
  0% {
    width: 0;
  }
  50% {
    width: 30px;
  }
  100% {
    width: 0;
  }
}

@keyframes shooting {
  0% {
    transform: translate(0, 0);
  }
  100% {
    transform: translate(650px, 650px);
  }
}
</style>